
///合成方法
function hecheng(data){
    getBodyHeight(data);
    draw(function(){
        document.getElementById('imgBox').innerHTML='<img src="'+base64[0]+'">';
    })
}

// var data=['img1.png','img2.png','img3.png','img4.png'],base64=[];

// var imgData = '';


var canvasWidth = $(".content").width();


function getBodyHeight(data){
    var height = 0 ;
    var maxNum = data.length
    for(var i=0;i<maxNum;i++){
        var subtitle = data[i]['subtitle']
        var h =  $("<img/>").attr("src", data[i].path).load(function(subtitle){
            pic_real_height = this.height; // work for in memory images.
            var windowWidth = $(window).width()

            var subheight  =  getSustrHeight(subtitle,windowWidth)
            //计算和canvas需要画的相同的高
            height += ((windowWidth*0.96)/this.width)*this.height+subheight+70
            if(i=maxNum-1){
                // sessionStorage.canvasHeight = height
                $.cookie('canvasHeight',height)
            }
        })
    }

}

function getSustrHeight(str,windowWidth){
    var initHeight= 28;//绘制字体距离canvas顶部初始的高度
    var lastSubStrIndex= 0; //每次开始截取的字符串的索引
    var  lineWidth = 0;
    var canvasWidth = windowWidth *0.9;
    for(let i=0;i<str.length;i++){
        if(lineWidth>canvasWidth){
            initHeight+=25;//20为字体的高度
            lastSubStrIndex=i;
            lineWidth=0;
        }else if(i==str.length-1){//绘制剩余部分
            initHeight+=5;
        }
    }
    return initHeight;
}


//////执行生成方法
function draw(fn){
    var canvasHeight = 0
    if($.cookie('canvasHeight')==null){
        canvasHeight = $(window).height()
    }else{
        canvasHeight =$.cookie('canvasHeight')
    }

    var c=document.createElement('canvas'),
        ctx=c.getContext('2d'),
        len=data.length;
    c.width=canvasWidth
    c.height=canvasHeight
    ctx.rect(0,0,c.width,c.height);
    ctx.fillStyle='#fff';
    ctx.fill();

    var left = 0
    var top = 0
    console.log(data);
    function drawing(n,left,top){
        if(n<len){
            if(n==0){
                top = c.height - c.height*0.985;
                left = c.width - c.width*0.9;
            }
            var img=new Image;
            img.crossOrigin = 'Anonymous'; //解决跨域
            img.src=data[n].path;
            img.onload=function(){

                ctx.font="18px 微软雅黑";
                ctx.fillStyle = '#000000'
                ctx.fillText(data[n].title,left*4.4,top);

                var initHeight =  sustr(ctx,c,data[n].subtitle,left,top)
                var imgHeight = (c.width/img.width)*img.height
                top = initHeight+20;

                console.log(img);
                ctx.drawImage(img,0,top,c.width,imgHeight);
                top  += imgHeight+50
                drawing(n+1,left,top);//递归
            }
        }else{
            console.log(c.toDataURL("image/jpeg",0.8));

            //保存生成作品图片
            base64.push(c.toDataURL("image/jpeg",0.8));
            //alert(JSON.stringify(base64));
            fn();
        }
    }
    drawing(0);
}



function sustr(ctx,c,str,left,top){
    var initHeight= top+28;//绘制字体距离canvas顶部初始的高度
    var lastSubStrIndex= 0; //每次开始截取的字符串的索引
    var  lineWidth = 0;
    var canvasWidth = c.width*0.9;
    ctx.fillStyle = '#000000'
    ctx.font='13px 微软雅黑';

    for(let i=0;i<str.length;i++){
        lineWidth+=ctx.measureText(str[i]).width;
        if(lineWidth>canvasWidth){
            ctx.fillText(str.substring(lastSubStrIndex,i),left*0.3,initHeight);//绘制截取部分
            ctx.strokeStyle='#FFFFFF';
            ctx.stroke();
            initHeight+=25;//20为字体的高度
            lastSubStrIndex=i;
            lineWidth=0;
        }else if(i==str.length-1){//绘制剩余部分
            ctx.fillText(str.substring(lastSubStrIndex,i+1),left*0.3,initHeight);
            ctx.strokeStyle='#FFFFFF';
            ctx.stroke();
            if(lineWidth==0 || lineWidth<150){
                lineWidth = 100;
            }
            initHeight+=5;
        }
    }
    return initHeight;
}